import Taro from "@tarojs/taro";
import {View, Text} from "@tarojs/components";
import "./discovery.less";
import {AtSearchBar} from "taro-ui";
import NavBar from "../../commponents/nav-bar/nav-bar";

export default class Discovery extends Taro.Component {
  config = {};

  constructor() {
    super(...arguments);
    this.state = {
      keyword: "",
      searchFocus: false
    };
  }

  componentWillMount() {
  }

  keywordChange(keyword) {
    this.setState({keyword: keyword});
  }

  search() {
    if (this.state.keyword.trim() === "") {
      Taro.atMessage({
        message: "请填写关键词",
        type: "error",
        duration: 1000
      });
      return;
    }

    this.setState({searchFocus: false});
    Taro.navigateTo({
      url: `/pages/search-result/search-result?keyword=${this.state.keyword}`
    });
  }

  render() {
    return (
      <View>
        <NavBar title="微Coding"/>
        <View className="container">
          <View>
            <AtSearchBar
              focus={this.state.searchFocus}
              value={this.state.keyword}
              actionName="搜索"
              onActionClick={this.search.bind(this)}
              onConfirm={this.search.bind(this)}
              onChange={this.keywordChange.bind(this)}
            />
          </View>
        </View>
      </View>
    );
  }
}
